<template>
  <div id="home">
    <title-view :showNew="SetFlag"></title-view>
    <left-view :showNew="SetFlag" :numLeft="numLeft"></left-view>
    <!-- 智能预警 -->
    <div>
      <div class="ShowButton">
        <el-switch v-model="SwitchData" active-color="#13ce66" inactive-color="#ff4949" @change="SwitchChange">
        </el-switch>
        <span style="color:#fff;">
          智能预警
        </span>
      </div>
      <div class="ShowButton2">
        <el-switch v-model="SetFlag"  :disabled="switchFlag" active-color="#13ce66" inactive-color="#ff4949" @change="SetChange">
        </el-switch>
        <span style="color:#fff;">
          数据联动
        </span>
      </div>
      <right-view :SetFlag="SetFlag" ref="rightView"></right-view>
    </div>
    <!-- 智能预警弹窗 -->
    <intell-warn :GoBanner="BannerListShow" @GoMapBanner="update" :imgID="imgID" ></intell-warn>
    <!-- 雷达 -->
    <div id="randar">
      <div class="randar">
        <span>
          <span>
            <span></span>
          </span>
        </span>
        <p class="artificial" v-show="SetFlag">
          人工识别
          <span></span>
        </p>
        <p class="smart" v-show="SetFlag">
          <span>智能识别</span>
        </p>
        <div id="myCanvas">
          <div :class="SetFlag ? 'startAn' : ''"></div>
        </div>
      </div>
    </div>
    <!-- <bottom-view></bottom-view> -->
    <!-- bottom轮播图 -->
    <div id="viewBottom">
      <div id="swip"  v-show="showBottom && SetFlag">
        <div class="swiper-container">
          <div class="swiper-wrapper">

            <div v-for='(item,index) in PlatformPicsList' class="swiper-slide" @click="showclick(item.RecognizeId)">
              <!-- <a style="text-align: center;font-size: 28px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-bottom: 5px;display: block;color: #ffffff;" :title="item.Name">{{item.Name}}</a> -->
              <img :src="item.ImgUrl">
            </div>
          </div>
          <!--                <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> -->
        </div>
      </div>
      <div class="code">
        <img src="../../assets/img/ercode.png" />
        <!-- <span>阳光食安</span> -->
      </div>
    </div>
  </div>
</template>

<script>
  import '../../../node_modules/swiper/css/swiper.css'
  import '../../../static/js/swiper.min.js'
  import TitleView from "../TitleView";
  import LeftView from "../LeftView";
  import RightView from "../RightView";
  // import BottomView from "../BottomView";
  import IntellWarn from "../IntellWarn";
  import {
    PlatformPics
  } from "../../request/api"
  export default {
    name: "home",
    data() {
      return {
        BannerListShow: false,
        SwitchData: false,
        swiperEvent: '',
        PlatformPicsList: [],
        imgID: '',
        switchFlag:false,
        showBottom: false,
        SetFlag:false,
        numLeft:0,
        tick:null,
        stepCount:0,
      };
    },
    components: {
      TitleView,
      LeftView,
      RightView,
      IntellWarn,
      // BottomView
    },
    methods: {
      GoMapBannerData(is) {
        // console.log(is)
        if (is == true) {
          this.BannerListShow = true
          this.SwitchData = true
        } else {
          this.BannerListShow = false
          this.SwitchData = false
        }
      },
      update(data) {
        this.BannerListShow = data;
        this.SwitchData = data;
      },
      // 智能预警开关
      SwitchChange() {
        if (this.SwitchData == false) {
          this.BannerListShow = false
        } else {
          this.BannerListShow = true
        }

      },
      SetChange(){
        console.log(this.SetFlag)
        if(this.SetFlag){
          this.switchFlag = true;
          setTimeout(()=>{
             this.initSwiper()
          },50)
          this.getNum()
        }
      },
      getNum(){
        clearTimeout(this.tick)
        this.tick = setTimeout(()=>{
          this.stepCount++
          if(this.stepCount < 901){
            this.numLeft = parseInt(this.$refs.rightView.$refs.count[0].displayValue) + parseInt(this.$refs.rightView.$refs.count[1].displayValue)
            this.getNum()
          }else{
            clearTimeout(this.tick)
          }
        }
        ,1000)

      },
      showclick(e) {
        this.imgID = e
        this.BannerListShow = true;
        this.SwitchData = true;
      },
      GetPlatformPics() {
        PlatformPics({
          code: 'all',
          AppId: this.$getParams('appid'),
          EBCOrganizationId: '',
          UserId: this.$getParams('userid')
        }).then((res) => {
          this.PlatformPicsList = res.SCater.Data.PlatformPics_A;
          this.showBottom = true
          setTimeout(() => {
            // this.initSwiper()
          }, 500)
        })
      },
      initSwiper() {
        let that = this;
        new Swiper('#swip .swiper-container', {
          // 如果需要分页器
          watchSlidesProgress: true,
          slidesPerView: 'auto',
          slideToClickedSlide: true,
          centeredSlides: true,
          initialSlide: 3,
          autoplay: 6000,
          autoplayDisableOnInteraction: false,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          onProgress: function(swiper, progress) {
            for (var i = 0; i < swiper.slides.length; i++) {
              var slide = swiper.slides.eq(i);
              var slideProgress = swiper.slides[i].progress;
              var modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.6 + 1;
              }
              var translate = slideProgress * modify * 30 + 'px';
              var scale = 1 - Math.abs(slideProgress) / 8;
              var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform('translateX(' + translate + ') scale(' + scale + ')');
              slide.css('zIndex', zIndex);
              slide.css('opacity', 1);
              if (Math.abs(slideProgress) > 3.5) {
                slide.css('opacity', 0);
              }
            }
          },
          onSetTransition: function(swiper, transition) {
            for (var i = 0; i < swiper.slides.length; i++) {
              var slide = swiper.slides.eq(i)
              slide.transition(transition);
            }

          },
          onSlideChangeEnd: function(swiper) {
            console.log(swiper.activeIndex)
            if (swiper.activeIndex > 50) {
              swiper.activeIndex = swiper.activeIndex % 50;
            }
            that.imgID = that.PlatformPicsList[swiper.activeIndex].RecognizeId
          }

        })
      }
    },
    mounted() {
      this.GetPlatformPics();
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ShowButton {
    position: absolute;
    right: 205px;
    z-index: 3000;
    top: 61px;
  }
  .ShowButton2{
    position: absolute;
    right: 75px;
    z-index: 3000;
    top: 61px;
  }
  #home {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url(../../assets/img/bag.png) center no-repeat;
    position: relative;
    background-size: 100% 100%;
  }

  #randar {
    height: auto;
    position: relative;
    border-radius: 2px;
  }

  .randar {
    width: 500px;
    height: 500px;
    position: absolute;
    /* z-index: 200; */
    top: 58%;
    left: 43%;
    margin-left: -125px;
    margin-top: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(1, 254, 204, 0.6);
  }

  .randar>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    margin-top: -37.5%;
    margin-left: -37.5%;
    border: 1px solid rgba(1, 254, 204, 0.6);
    border-radius: 50%;
    box-sizing: border-box;
  }

  .randar>span>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    margin-top: -35%;
    margin-left: -35%;
    border: 1px solid rgba(1, 254, 204, 0.6);
    border-radius: 50%;
    box-sizing: border-box;
  }

  .randar>span>span>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    margin-top: -30%;
    margin-left: -30%;
    border: 1px solid rgba(1, 254, 204, 0.6);
    border-radius: 50%;
    box-sizing: border-box;
  }

  .artificial {
    position: absolute;
    top: 140px;
    left: 70px;
    font-size: 12px;
    color: rgba(244, 67, 67, 1);
    /* color: #00ff33; */
    -webkit-animation: smart 2.5s infinite alternate;
    animation: smart 2.5s infinite alternate;
  }

  .smart {
    position: absolute;
    bottom: 165px;
    right: 70px;
    font-size: 12px;
    color: rgb(214, 214, 7);
    -webkit-animation: smart 3s infinite;
    animation: smart 3s infinite;
  }

  .randar>p:after {
    content: " ";
    display: block;
    background: rgba(244, 67, 67, 1);
    width: 2px;
    height: 2px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    border-radius: 50%;
    box-shadow: 0 0px 13px 8px rgba(244, 67, 67, 1);
  }

  .randar>.smart:after {
    background: rgb(214, 214, 7);
    box-shadow: 0 0px 13px 8px rgba(214, 214, 7, 1);
  }

  @-webkit-keyframes smart {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes smart {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  #myCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -250px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 2px solid rgba(61, 164, 251, 0.5);
    box-sizing: border-box;
  }

  #myCanvas>div {
    background-image: linear-gradient(44deg,
      rgba(0, 255, 51, 0) 50%,
      rgba(1, 254, 204, 1) 100%);
    width: 270px;
    height: 270px;
    position: absolute;
    top: -1%;
    left: -4%;
    /* animation: radar-beam 10s infinite;
    animation-timing-function: linear;
    -webkit-animation: radar-beam 10s infinite;
    -webkit-animation-timing-function: linear;
    transform-origin: bottom right; */
    border-radius: 100% 0 0 0;
  }
  .startAn{
    animation: radar-beam 10s infinite;
    animation-timing-function: linear;
    -webkit-animation: radar-beam 10s infinite;
    -webkit-animation-timing-function: linear;
    transform-origin: bottom right;
  }
  @keyframes radar-beam {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @-webkit-keyframes radar-beam {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  #viewBottom {
    height: 225px;
    width: 85%;
    /*      margin-left: 2.5%; */
    position: absolute;
    bottom: 21px;
    left: 0;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    padding-top: 8px;
    color: #FFFFFF;
  }

  #viewBottom .swiper-button-prev {
    left: 0 !important;
  }

  #viewBottom .swiper-slide img {
    width: 100% !important;
    height: 100%;
    border: 2px solid #3DA4FB;
  }

  #viewBottom .swiper-slide {
    width: 290px;
    height: 215px;
  }

  #swip {
    height: 100%;
  }

  .code {
    width: 178px;
   /* height: 240px; */
    position: absolute;
    bottom: -5px;
    right: -189px;
  }

  .code img {
    display: block;
    width: 180px;
    height: 180px;
  }

  .code span {
    color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 20px;
    display: block;
    font-weight: bold;
    padding-top: 12px;
  }
</style>
